<template>
  <a-row justify="center" style="margin: 20px">
    <a-col :span="20">
      <h1 class="center">{{ essay.title }}</h1>
      <h2 class="center">作者：{{ essay.author }}</h2>
      <a-typography-paragraph>
        <blockquote>文章介绍：{{ essay.description }}</blockquote>
      </a-typography-paragraph>
      <div style="border: 1px solid #ccc">
        <Editor
          style="height: 100%; overflow-y: hidden"
          v-model="essay.content"
          :defaultConfig="editorConfig"
          :mode="mode"
          @onCreated="handleCreated"
        />
      </div>
    </a-col>
  </a-row>
</template>

<script>
import { useRoute } from "vue-router";
import userApi from "@/apis/userApi";
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { onBeforeUnmount, shallowRef, reactive } from "vue";
import { Editor } from "@wangeditor/editor-for-vue";
export default {
  name: "EssaysView",
  components: {
    Editor,
  },
  setup() {
    const router = useRoute();
    const essayId = router.params.essayId;

    const essay = reactive({
      // id: "",
      // title: "",
      // author: "",
      // support: "",
      // content: "......",
      // description: "",
    });

    const editorRef = shallowRef();

    const editorConfig = { placeholder: "请输入内容..." };
    editorConfig.readOnly = true;

    // 组件销毁时，也及时销毁编辑器
    onBeforeUnmount(() => {
      const editor = editorRef.value;
      if (editor == null) return;
      editor.destroy();
    });

    const handleCreated = (editor) => {
      editorRef.value = editor; // 记录 editor 实例，重要！
    };

    userApi.getEssayById(essayId).then((resp) => {
      essay.id = resp.essay.id;
      essay.title = resp.essay.title;
      essay.author = resp.essay.author;
      essay.support = resp.essay.support;
      essay.content = resp.essay.content;
      essay.description = resp.essay.description;
    });

    return {
      editorRef,
      mode: "default", // 或 'simple'
      editorConfig,
      handleCreated,

      essay,
    };
  },
};
</script>

<style scoped>
.center {
  align-items: center;
  justify-content: center;
  display: flex;
}
</style>